Door DocuGenerate Toepassingen voor voorraadbeheer die zijn gebouwd met Retool blinken uit in het organiseren van data en het bieden van intuïtieve interfaces voor het volgen van producten, bestellingen, en zendingen. Veel bedrijven hebben echter professionele documentatie nodig voor hun verzendactiviteiten die verder gaat dan eenvoudige gegevensweergaven. Het maken van PDF-verzendformulieren met gedetailleerde productinformatie, adressen, en aangepaste branding kan de logistieke activiteiten aanzienlijk verbeteren en klanten voorzien van professionele documentatie.
In deze tutorial verrijken we het bestaande sjabloon Inventory Management App van Retool door de documentgeneratiemogelijkheden van DocuGenerate te integreren. In plaats van een voorraadsysteem vanaf nul te bouwen, richten we ons op het toevoegen van professionele generatie van PDF-verzendformulieren aan een reeds functionele applicatie. Deze aanpak laat zien hoe bestaande Retool-applicaties kunnen worden verrijkt met functies voor documentgeneratie zonder bestaande workflows te verstoren.
De integratie die we bouwen, creëert een krachtige combinatie waarbij gebruikers hun voorraaddata kunnen beheren via de intuïtieve interface van Retool, terwijl ze op verzoek professionele verzenddocumenten genereren. Deze oplossing is bijzonder waardevol voor bedrijven die vervoerders, klanten, en interne teams moeten voorzien van gestandaardiseerde verzenddocumentatie met gedetailleerde productinformatie en bedrijfsbranding.
Voordat we mogelijkheden voor documentgeneratie toevoegen, bekijken we eerst de basis waarmee we werken. Het sjabloon Inventory Management App van Retool biedt een uitgebreide oplossing voor het bijhouden van voorraadniveaus, het beheren van zendingen, en het volgen van productdata op meerdere locaties.
De applicatie bevat verschillende belangrijke onderdelen die het ideaal maken voor onze verbetering met verzendformulieren:
Zendingstracking: Een compleet systeem voor het beheren van zendingen van aanmaak tot levering, inclusief statusupdates en gedetailleerde zendingsinformatie.
Productbeheer: Uitgebreide productdata, waaronder beschrijvingen, hoeveelheden, en prijsinformatie die essentieel zijn voor verzenddocumentatie.
Locatiebeheer: Ondersteuning voor meerdere magazijnen en verzendlocaties, met de adresinformatie die nodig is voor verzendformulieren.
Gegevensrelaties: Goed gestructureerde relaties tussen zendingen, producten, en locaties die uitgebreide documentgeneratie mogelijk maken.
De bestaande datastructuur van het sjabloon biedt alle informatie die doorgaans vereist is voor professionele verzendformulieren, waaronder gegevens van afzender en ontvanger, productbeschrijvingen, hoeveelheden, en zendingsstatusinformatie.
Om ons te richten op de aspecten van documentgeneratie in deze tutorial, brengen we verschillende wijzigingen aan in het basissjabloon. Deze wijzigingen vereenvoudigen de interface, terwijl de kernfunctionaliteit die nodig is voor het genereren van verzendformulieren behouden blijft.
Begin met het klonen van het sjabloon Inventory Management App uit de sjabloonbibliotheek van Retool. Dit biedt de volledige basis met voorbeelddata, gevestigde workflows, en beproefde patronen voor de gebruikersinterface.
Het gekloonde sjabloon bevat alle benodigde componenten, query’s, en voorbeelddata om het proces van verzendformuliergeneratie te demonstreren. De bestaande structuur biedt realistische zendingsscenario’s die verschillende mogelijkheden voor documentgeneratie tonen.
Voor deze tutorial verwijderen we wat complexiteit om ons te richten op de workflow voor documentgeneratie. De belangrijkste vereenvoudiging betreft het bijwerken van de shipments-query om datumfiltering te verwijderen, waardoor het eenvoudiger wordt om alle beschikbare zendingen te bekijken.
We verwijderen de componenten voor het filteren op datumbereik en vereenvoudigen de query getShipments. Deze wijziging heeft geen invloed op de kernfunctionaliteit, maar maakt het eenvoudiger om tijdens onze tutorial door zendingen te navigeren. In een productieomgeving zou u deze filtermogelijkheden doorgaans behouden voor het beheren van grote hoeveelheden zendingsdata. De vereenvoudigde weergave biedt directe toegang tot alle zendingen, waardoor het eenvoudiger wordt om documentgeneratie te testen met verschillende soorten en configuraties van zendingen.
Vervolgens voegen we een knop View Shipping Form toe aan de detailpagina van de zending. Deze knop activeert het documentgeneratieproces en navigeert gebruikers naar een PDF-viewerpagina.
De plaatsing van de knop integreert natuurlijk met de bestaande interface voor zendingsdetails, en biedt gebruikers directe toegang tot het genereren van verzendformulieren zonder bestaande workflows te verstoren. Het ontwerp van de knop komt overeen met de bestaande stijlpatronen van de applicatie en behoudt visuele consistentie.
De laatste stap betreft het maken van een nieuwe pagina ShippingFormPDF, voor het weergeven van gegenereerde verzendformulieren. Deze pagina bevat een PDF-viewercomponent die is geconfigureerd om documenten weer te geven die door DocuGenerate zijn gegenereerd, en een fab-knop Print waarmee gebruikers het verzendformulier kunnen afdrukken.
Om dynamische verzendformulieren te genereren, moeten we eerst een sjabloon maken, ontworpen om alle essentiële elementen op te nemen die doorgaans voorkomen in commerciële verzenddocumentatie. Het verzendformuliersjabloon bevat secties met merge-tags voor afzenderinformatie, ontvangerdetails, zendingsinhoud, en aanvullende notities.
Het sjabloon Shipping Form dat in deze tutorial wordt gebruikt, bevat verschillende belangrijke functies:
Voorwaardelijke Content: De sectie met notities verschijnt alleen wanneer er notities bij de zending aanwezig zijn, met behulp van de voorwaardelijke syntax
Dynamische Tabel: De sectie met zendingsitems breidt automatisch uit om verschillende aantallen producten te verwerken, met behulp van de tabelsyntax
Consistente Opmaak: Alle elementen behouden professionele opmaak, ongeacht de lengte of complexiteit van de content
Nu onze interface klaar is, kunnen we ons richten op het integreren van de PDF-generatiemogelijkheden van DocuGenerate in de bestaande workflow voor zendingen, om automatisch verzendformulieren te maken.
We moeten de verbinding tussen Retool en de API van DocuGenerate configureren. Dit houdt in dat we een REST API-resource maken die de authenticatie en communicatie met de documentgeneratiedienst van DocuGenerate afhandelt.
De configuratie van de REST API vereist:
https://api.docugenerate.com (of gebruik een van onze regionale eindpunten voor betere prestaties)AuthorizationDeze configuratie legt de basis voor alle documentgeneratieverzoeken, verzorgt automatisch de authenticatie, en biedt een herbruikbare verbinding voor meerdere documenttypes.
Nu ons sjabloon is gemaakt, moeten we de Retool-query configureren die zendingsdata naar DocuGenerate stuurt voor verwerking. Deze query verzorgt gegevenstransformatie en API-communicatie.
De query generateDocument gebruikt de DocuGenerate-resource en de configuratie ervan omvat:
/v1/document/ voor het maken van nieuwe documententemplate_id: ID van het sjabloon Shipping Form gemaakt in DocuGenerateoutput_format: ingesteld op .pdf om PDF-documenten te genererenname: geeft de dynamische documentnaam op, overeenkomend met de naam die in de app wordt weergegeven (Shipment #{{ Shipments_HistoryCollection.selectedItem.id }})data: de data van het verzendformulier, gebaseerd op Shipments_HistoryCollection.selectedItem
[{
"shipment_number": "{{ Shipments_HistoryCollection.selectedItem.id }}",
"shipment_from": "{{ Shipments_HistoryCollection.selectedItem.fromStreet }}",
"shipment_to": "{{ Shipments_HistoryCollection.selectedItem.toStreet }}",
"shipment_status": "{{ Shipments_HistoryCollection.selectedItem.status }}",
"shipment_notes": "{{ Shipments_HistoryCollection.selectedItem.notes }}",
"shipment_items": {{ getShipmentItems.data }},
"shipment_date": "{{ Shipments_HistoryCollection.selectedItem.date }}"
}]
De query zet de zendingsdata van Retool om naar het formaat dat wordt verwacht door de sjabloonverwerkingsengine van DocuGenerate. Dit omvat het extraheren van relevante informatie uit het geselecteerde zendingsrecord en het op de juiste manier opmaken voor de merge-tags die in ons sjabloon zijn gedefinieerd.
De query getShipmentItems levert de zendingsitems in een tabelformaat, maar dat is niet compatibel met het lijstformaat dat wordt verwacht voor de waarde shipment_items die wordt gebruikt in de query generateDocument.
We moeten deze tabulaire data omzetten naar een array-structuur die de dynamische productlijst in ons verzendformuliersjabloon kan vullen. Door de volgende JavaScript-code in te voeren bij de stap Transform results, wordt het tabelformaat omgezet naar een array van objecten met de attributen title en quantity:
const { title, quantity } = data;
return title.map((t, i) => ({
title: t,
quantity: quantity[i]
}));
Deze transformatie zorgt ervoor dat productinformatie uit de databasestructuur van Retool overeenkomt met het array-formaat dat wordt verwacht door de sjabloonverwerkingsengine van DocuGenerate. De resulterende array kan elk aantal producten verwerken, met behoud van consistente opmaak in het gegenereerde document.
De uiteindelijke implementatie verbindt alle onderdelen tot een soepele gebruikerservaring, van zendingsselectie tot PDF-generatie en -weergave. Deze integratie zorgt ervoor dat documentgeneratie aanvoelt als een natuurlijke uitbreiding van de bestaande workflow voor voorraadbeheer, in plaats van een apart proces.
De knop View Shipping Form vereist twee event handlers om de volledige workflow te beheren. De eerste event handler activeert de query generateDocument, die de zendingsdata naar DocuGenerate stuurt en als antwoord de URL van het gegenereerde PDF-bestand ontvangt.
De tweede event handler verzorgt de navigatie naar de pagina ShippingFormPDF na succesvolle documentgeneratie. Dit creëert een soepele gebruikerservaring waarbij het klikken op de knop onmiddellijk het document genereert en aan de gebruiker toont.
De laatste stap bestaat uit het weergeven van het gegenereerde verzendformulier op de speciale pagina die aan het begin van deze tutorial aan de applicatie is toegevoegd.
Om het gegenereerde document te laden in de component ShippingFormPDFViewer, moeten we de volgende waarde opgeven in het invoerveld File URL:
{{ generateDocument.data?.document_uri }}
Deze configuratie toont automatisch de PDF die wordt geretourneerd door de API van DocuGenerate via de documentgeneratiequery, waardoor gebruikers direct toegang hebben tot hun gegenereerde verzendformulieren.
Nu alle onderdelen zijn geconfigureerd, biedt de volledige workflow een professionele documentgeneratie-ervaring die rechtstreeks is geïntegreerd in de interface voor voorraadbeheer. Gebruikers kunnen van zendingsbeheer naar professionele PDF-generatie navigeren zonder de applicatie te verlaten.
De uiteindelijke oplossing, die u hier kunt bekijken, toont verschillende belangrijke voordelen:
Het integreren van de documentgeneratiemogelijkheden van DocuGenerate in de Inventory Management App van Retool toont aan hoe bestaande no-code applicaties kunnen worden verrijkt met professionele documentcreatie, zonder bestaande workflows te verstoren. Deze aanpak biedt aanzienlijke waarde voor bedrijven die consistente, professionele verzenddocumentatie moeten genereren, terwijl de efficiëntie van hun bestaande processen voor voorraadbeheer behouden blijft.
De combinatie van de intuïtieve mogelijkheden voor interfacebouw van Retool met de robuuste sjabloonverwerking van DocuGenerate creëert een oplossing die operationele efficiëntie verbindt met professionele documentatievereisten. Gebruikers kunnen hun voorraad en zendingen blijven beheren via vertrouwde interfaces, terwijl ze met eenvoudige knopklikken toegang hebben tot documentgeneratie op ondernemingsniveau. De flexibiliteit van beide platforms betekent dat de oplossing kan meegroeien met veranderende bedrijfsvereisten, en alles ondersteunt van eenvoudige verzendlabels tot complexe verzendmanifesten met meerdere pagina’s.
De stapsgewijze aanpak van de tutorial toont aan dat geavanceerde functies voor documentgeneratie kunnen worden toegevoegd aan bestaande applicaties zonder uitgebreide ontwikkelingsmiddelen te vereisen of huidige operationele workflows te verstoren. Dit maakt professionele documentautomatisering toegankelijk voor bedrijven van elke omvang, van kleine bedrijven die tientallen zendingen beheren tot grote ondernemingen die dagelijks duizenden verzenddocumenten verwerken.
Voer uw e-mailadres in om de nieuwste nieuwsbrief van DocuGenerate te ontvangen
Leer hoe u een geautomatiseerde workflow voor factuurgeneratie bouwt met n8n en DocuGenerate die een map controleert op Excel-bestanden, de data extraheert, en professionele PDF-facturen genereert. Ideaal voor lokale verwerking zonder afhankelijk te zijn van meerdere cloudgebaseerde oplossingen.
Ontdek hoe u automatisch nieuwe sjablonen maakt wanneer Google Docs aan een map worden toegevoegd, en sjablonen bijwerkt wanneer documenten worden gewijzigd. Perfect voor teams die liever in Google Docs werken, maar de kracht van DocuGenerate nodig hebben voor documentgeneratie.
Leer hoe u een volledige workflow in Bubble maakt die gepersonaliseerde NDA's genereert en deze als e-mailbijlagen verstuurt naar klanten. Deze stapsgewijze tutorial laat zien hoe u een professioneel onboardingsysteem voor klanten bouwt met de AI-paginaontwerper van Bubble.